<template>
    <div class="whole">

        <div class="wrapperCenter">
            <van-pull-refresh v-model="loadingdown" @refresh="onRefresh">
                <van-config-provider :theme-vars="themeVars">
                    <van-tabs title-active-color="#FFA328" color="#FFA328" @click="tabDitch()" v-model:active="active">
                        <van-tab :title="item.name" v-for="(item,index) in tabList" :key="index" :name="index" />
                    </van-tabs>
                </van-config-provider>
                <div class="content">
                    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList"
                        :immediate-check="false">
                        <!-- <van-checkbox-group v-model="terList"> -->
                        <empty v-if="!list.length"></empty>
                        <div class="dis" v-for="(item,index) in list" :key="index">
                            <div class="main" :class="index!=0?'main_top':''">
                                <div class="dia">
                                    <!-- <img src="/src/assets/terminal/portrait.png" alt="" /> -->
                                    <div class="main_d">
                                        <div class="">
                                            <div class="condition">
                                                终端编号:{{item.terminalSn}}
                                            </div>
                                            <div class="institution">
                                                所属渠道:{{item.channelName}}
                                            </div>
                                            <div class="condition">
                                                商户名称:{{item.posMerchantName}}
                                            </div>
                                            <div class="condition" v-if="item.status==1">
                                                审核状态:成功
                                            </div>
                                            <div class="condition" v-if="item.status==0">
                                                审核状态:待审核
                                            </div>
                                            <div class="condition" v-if="item.status==2">
                                                审核状态:失败
                                            </div>
                                            <div class="condition">
                                                创建时间:{{item.createTime}}
                                            </div>
                                            <div class="condition">
                                                审核描述:{{item.statusDesc}}
                                            </div>
                                        </div>

                                        <!-- <div class="switch">
                                          <van-switch v-model="item.combined" size="20px" active-color="#ffa225"
                                              :active-value="1" class="tabs_size" :inactive-value="0"
                                              @change="withdraw(item,index)" />
                                          <div class="deposit">
                                              合并提现
                                          </div>
                                      </div> -->
                                    </div>
                                </div>
                                <!-- <div class="dia" style="margin-top: 12px;justify-content: flex-end;margin-right: 12px;"
                                    v-if="item.status==2">
                                    <div class="refer dis" @click="referSubmit(item)">
                                        重新提交
                                    </div>
                                </div> -->
                                <!-- <van-checkbox :name="item.terminalSn" shape="round" checked-color="#FF2828"> -->

                                <!-- <div class="remaining dis" @click="lookbalance(item)"
                                  v-if="item.combined==1 && channelCode!='CHANNEL_POS_DY'">
                                  查看余额
                              </div> -->
                                <!-- </van-checkbox> -->
                            </div>
                        </div>
                        <!-- </van-checkbox-group> -->
                    </van-list>
                </div>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
    import {
        selectMerChannelListAllByAgent
    } from '@/api/terminal'
    import {
        useRoute,
        useRouter,
        RouterView
    } from 'vue-router'
    import store from '@/store'
    import {
        defineComponent,
        reactive,
        toRefs
    } from 'vue';
    import {
        showToast
    } from 'vant'
    export default defineComponent({
        name: 'terminalList',
        setup() {
            const router = useRouter()
            const route = useRoute()
            const state = reactive({
                active: 0,
                showAction: false,
                // terList: [],
                pageStart: 1,
                pageSize: 20,
                loading: false,
                finished: false,
                list: [],
                channelCode: "",
                // checkedAll: false,
                // channelName: "",
                terminalSn: "",
                tabList: [{
                        name: "全部"
                    },
                    {
                        name: "待提交"
                    }, {
                        name: "审核中"
                    }, {
                        name: "审核成功"
                    },
                    {
                        name: "审核失败"
                    }
                ],
                checked: false,
                withdrawAmt: "",
                loadingdown: false,
                status: -1
            })
            //tab标签栏文字大小
            const themeVars = reactive({
                tabFontSize: '14px',
                floatingBubbleBackground: "#fff"
            })
            // const themeVars = reactive({
            //     rateIconFullColor: '#07c160',
            //     sliderBarHeight: '4px',
            //     sliderButtonWidth: '20px',
            //     sliderButtonHeight: '20px',
            //     sliderActiveBackground: '#07c160',
            //     buttonPrimaryBackground: '#07c160',
            //     buttonPrimaryBorderColor: '#07c160',
            // });
            //下拉刷新
            const onRefresh = () => {
                state.pageStart = 1
                state.list = []
                // state.loading = false
                // state.finished = false
                getList()

            }
            const offset = ref({
                x: 0,
                y: 140
            });
            //tan滑动
            const tabDitch = () => {
                console.log(state.active)
                if (state.active == 0) {
                    state.status = -1
                } else if (state.active == 1) {
                    state.status = 3
                } else if (state.active == 2) {
                    state.status = 0
                } else if (state.active == 3) {
                    state.status = 1
                } else if (state.active == 4) {
                    state.status = 2
                }
                state.pageStart = 1
                state.list = []
                getList()
            }
            //审核记录
            const checkaudit = () => {
                router.push({
                    path: '/checkRecord'
                })
            }
            // 搜索
            const onSearch = () => {
                state.pageStart = 1
                state.list = []

                getList()
            }
            // const getTab = () => {
            //     let parames = {

            //     }
            //     selectMerchantChannel(parames).then(res => {
            //         state.tabList = res.data
            //         for (let i in res.data) {
            //             state.tabList[i]['name'] = res.data[i].channelName
            //         }
            //         state.channelCode = res.data[0].channelCode
            //         getList()
            //     })
            //     console.log(state.tabList)
            // }
            // getTab()
            //获取数据
            const getList = () => {
                // state.channelCode = router.query.channelCode
                // state.channelName = router.query.channelName
                let parames = {
                    // channelCode: state.channelCode,
                    // terminalSn:state.terminalSn,
                    pageStart: state.pageStart,
                    pageSize: state.pageSize,
                    status: state.status
                }
                if (state.status == -1) {
                    delete parames.status
                }
                selectMerChannelListAllByAgent(parames).then(res => {
                    state.loadingdown = false
                    if (res.data.records.length != 0) {
                        if (res.data.records.length < 10) {
                            state.finished = true
                            state.loading = false
                        } else {
                            state.pageStart++
                            state.finished = false
                            state.loading = false
                        }
                        state.list = state.list.concat(res.data.records)
                        // for (let i in state.list) {
                        // 	if (state.list[i].combined == 0) {
                        // 		state.list[i]['checked'] = false
                        // 	} else {
                        // 		state.list[i]['checked'] = true
                        // 	}
                        // }
                    } else {
                        state.finished = true
                        state.loading = false
                    }

                })
            }
            getList()
            //合并提现
            const withdraw = (e, index) => {
                console.log(e.combined)
                if (e.combined == 1) {
                    let parames = {
                        agencyMerchantNo: e.agencyMerchantNo,
                        channelCode: state.channelCode,
                        combined: e.combined,
                        merchantNo: e.merchantNo,
                    }
                    updateMerchantMerge(parames).then(res => {
                        showToast('修改成功')
                    }).catch(error => {
                        console.log(error)
                        if (e.combined == 1) {
                            state.list[index].combined = 0
                        } else {
                            state.list[index].combined = 1
                        }

                    })
                } else {
                    getBanlace(e, index)
                }

            }
            //查询余额
            const getBanlace = (e, index) => {
                let parames = {
                    agencyMerchantNo: e.agencyMerchantNo,
                    channelCode: state.channelCode,
                    // combined: route.query.checked,
                    merchantNo: route.query.merchantNo,
                }
                selectMerchantWallet(parames).then(res => {
                    state.withdrawAmt = res.data.withdrawAmt
                    if (state.withdrawAmt > 0) {
                        showToast('该商户有余额待提现,无法修改合并到账标识!')
                        state.list[index].combined = 1
                    } else {
                        let parames = {
                            agencyMerchantNo: e.agencyMerchantNo,
                            channelCode: state.channelCode,
                            combined: e.combined,
                            merchantNo: e.merchantNo,
                        }
                        updateMerchantMerge(parames).then(res => {
                            showToast('修改成功')
                        }).catch(error => {
                            console.log(error)
                            if (e.checked == 1) {
                                state.list[index].checked = 0
                            } else {
                                state.list[index].checked = 1
                            }

                        })
                    }
                })
            }
            //重新提交
            const referSubmit = (e) => {
                router.push({
                    path: "/commercial",
                    query: {
                        datainfo: JSON.stringify(e),
                        type: 0
                    }
                })
            }
            //查看余额
            const lookbalance = (e) => {
                console.log(e.agencyMerchantNo)

                router.push({
                    path: '/balance',
                    query: {
                        agencyMerchantNo: e.agencyMerchantNo,
                        combined: e.combined,
                        merchantNo: e.merchantNo,
                        channelCode: state.channelCode,
                    }
                })
            }
            return {
                ...toRefs(state),
                onSearch,
                // getTab,
                tabDitch,
                getList,
                themeVars,
                withdraw,
                lookbalance,
                getBanlace,
                offset,
                checkaudit,
                onRefresh,
                referSubmit
            }
        }
    })
</script>
<style scoped lang="scss">
    .whole {
        height: 100vh;
        width: 100%;
        background-color: #fff;
        overflow-y: auto;

        .search {
            width: 328px;
            // position: fixed;
            // top: 0;
        }

        .wrapperCenter {
            height: 100vh;
            // margin-top: 200px;
            overflow: scroll;

            .content {

                // padding-bottom:50px;
                // box-sizing: border-box;
                .main {
                    width: 339px;
                    // height: 144px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
                    border-radius: 6px;
                    padding: 10px 0px;
                    box-sizing: border-box;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 13px;
                    color: #333333;
                    margin-top: 12px;

                    .refer {
                        width: 80px;
                        height: 30px;
                        background: #FFA328;
                        border-radius: 20px 20px 20px 20px;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #FFFFFF;
                    }

                    img {
                        width: auto;
                        height: 30px;
                        margin-left: 12px;
                    }

                    .main_d {
                        width: 320px;
                        display: flex;
                        justify-content: space-between;
                        padding: 0px 4px;
                        box-sizing: border-box;

                        .switch {
                            display: flex;
                            align-items: center;
                            flex-direction: column;

                            .deposit {
                                font-family: PingFang SC, PingFang SC;
                                font-weight: 400;
                                font-size: 11px;
                                color: #FFA225;
                                margin-top: 6px;
                            }
                        }
                    }

                    .remaining {
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #FFA225;
                        width: 100%;
                        border-top: 1px solid #F3F3F3;
                        margin-top: 16px;
                        padding: 12px 0px 0px 0px;
                        box-sizing: border-box;
                    }

                    .institution {
                        margin-top: 2px;
                        margin-left: 12px;
                    }

                    .condition {
                        margin-top: 4px;
                        margin-left: 12px;
                    }
                }
            }
        }

        .wrapperBottom {
            padding: 14px;
            position: fixed;
            width: 100%;
            bottom: 0;
            background: #ffffff;
            opacity: 1;
            border-radius: 0px;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            box-sizing: border-box;

            .left {
                display: flex;
                align-items: center;
            }

            .right {
                // width: 73px;
                // height: 21px;
                background: #FF2828;
                border-radius: 14px;
                padding: 6px 8px;
                box-sizing: border-box;
                opacity: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                color: #ffffff;
                // border-radius: 5px;
            }
        }

        .audit {
            position: fixed;
            left: 24;
            top: 240px;
            background-image: url(@/assets/terminal/audit.png);
            background-repeat: no-repeat;
            background-size: 72px 76px;
            width: 72px;
            height: 76px;
        }

    }

    ::v-deep .van-search__content {
        background-color: #EDF5FF !important;
    }

    ::v-deep .van-switch {

        --van-switch-size: 16px !important;
        // --van-switch-width:32px !important;
        --van-switch-height: 20px !important;
        --van-switch-node-size: 16px !important;
    }



    ::v-deep .van-floating-bubble__icon {
        font-size: 48px;
    }

    // :root:root {
    //   -van-switch-height: 30px !important;
    //   --van-switch-width:30px !important;
    // }
</style>